<section>
    <div class="modal-header">
        <h3 class="modal-title" ng-show="operation === 'ADD'"><small>Create:</small> {{subscription.name}}</h3>
        <h3 class="modal-title" ng-show="operation === 'EDIT'"><small>Edit:</small> {{subscription.name}}</h3>
    </div>
    <div class="modal-body">
        <form name="subscriptionForm" class="form-horizontal" role="form">
            <div ng-hide="!authEnabled.headers || isAuthorized" class="form-group {{subscriptionForm.rootPassword.$valid ? '' : 'has-error'}}">
                <label for="rootPassword" class="col-md-3 control-label">Root password</label>
                <div class="col-md-9">
                    <input class="form-control" type="password" id="rootPassword" name="rootPassword" ng-required="!isAuthorized && authEnabled.headers" placeholder="root password" ng-model="rootPassword"/>
                </div>
            </div>

            <div class="form-group {{subscriptionForm.subscriptionName.$valid ? '' : 'has-error'}} " ng-show="operation === 'ADD'">
                <label for="subscriptionName" class="col-md-3 control-label">Name</label>
                <div class="col-md-9">
                    <input class="form-control" id="subscriptionName" name="subscriptionName" required placeholder="name of subscription" ng-model="subscription.name" ng-pattern="/^[a-zA-Z0-9._-]+$/"/>
                </div>
            </div>

            <div class="form-group {{subscriptionForm.subscriptionEndpoint.$valid ? '' : 'has-error'}}">
                <label for="subscriptionEndpoint" class="col-md-3 control-label">Endpoint</label>
                <div class="col-md-9">
                    <input class="form-control" endpoint="" id="subscriptionEndpoint" name="subscriptionEndpoint" required placeholder="where to send messages" ng-model="subscription.endpoint"/>
                </div>
            </div>
            <div class="form-group {{subscriptionForm.subscriptionDescription.$valid ? '' : 'has-error'}}">
                <label for="subscriptionDescription" class="col-md-3 control-label">Description</label>
                <div class="col-md-9">
                    <input class="form-control" id="subscriptionDescription" name="subscriptionDescription" required placeholder="who and why subscribes?" ng-model="subscription.description"/>
                </div>
            </div>

            <owner-selector form="subscriptionForm" source="subscription.owner.source" owner="subscription.owner.id"></owner-selector>

            <div class="form-group">
                <label for="subscriptionType" class="col-md-3 control-label">Content type</label>
                <div class="col-md-9">
                    <select required class="form-control" id="subscriptionType" name="subscriptionType" ng-model="subscription.contentType">
                        <option value="JSON">JSON</option>
                        <option value="AVRO" ng-disabled="subscription.deliveryType === 'BATCH'">AVRO (not supported in BATCH delivery mode)</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label for="subscriptionType" class="col-md-3 control-label">Delivery type</label>
                <div class="col-md-9">
                    <div class="input-group">
                        <select required class="form-control" id="deliveryType" name="deliveryType" ng-model="subscription.deliveryType">
                            <option value="SERIAL">SERIAL</option>
                            <option value="BATCH" ng-disabled="subscription.subscriptionType === 'AVRO'">BATCH (incubating feature)</option>
                        </select>
                        <span class="input-group-addon helpme-addon" uib-tooltip="Hermes can deliver messages in SERIAL (one message at a time) or in BATCH (group of messages at a time).">?</span>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <label for="mode" class="col-md-3 control-label">Mode</label>
                <div class="col-md-9">
                    <div class="input-group">
                        <select required class="form-control" id="mode" name="mode" ng-model="subscription.mode">
                            <option value="ANYCAST">ANYCAST</option>
                            <option value="BROADCAST">BROADCAST (incubating feature)</option>
                        </select>
                        <span class="input-group-addon helpme-addon" uib-tooltip="Hermes can deliver messages in ANYCAST (to one of subscribed hosts) or in BROADCAST (to all subscribed hosts) mode.">?</span>
                    </div>
                </div>
            </div>

            <div class="form-group {{subscriptionForm.subscriptionRateLimit.$valid ? '' : 'has-error'}}" ng-show="subscription.deliveryType === 'SERIAL'">
                <label for="subscriptionRateLimit" class="col-md-3 control-label">Rate limit</label>
                <div class="col-md-9">
                    <div class="input-group">
                        <input type="number" min="0" max="5000" step="10" ng-required="subscription.deliveryType === 'SERIAL'" class="form-control" id="subscriptionRateLimit" name="subscriptionRateLimit" placeholder="limit of messages sent by Hermes" ng-model="subscription.subscriptionPolicy.rate"/>
                        <span class="input-group-addon">messages/second</span>
                        <span class="input-group-addon helpme-addon" uib-tooltip="Maximum rate defined by user (per data center). Maximum rate calculated by algorithm can be observed in 'Output rate' metric.">?</span>
                    </div>
                </div>
            </div>

            <div class="form-group {{subscriptionForm.subscriptionBatchSize.$valid ? '' : 'has-error'}}" ng-show="subscription.deliveryType === 'BATCH'">
                <label for="subscriptionBatchSize" class="col-md-3 control-label">Batch size</label>
                <div class="col-md-9">
                    <div class="input-group">
                        <input type="number" min="1" max="1000000" step="1" ng-required="subscription.deliveryType === 'BATCH'" class="form-control" id="subscriptionBatchSize" name="subscriptionBatchSize" placeholder="Desired number of messages in a single batch." ng-model="subscription.subscriptionPolicy.batchSize"/>
                        <span class="input-group-addon">messages</span>
                    </div>
                </div>
            </div>

            <div class="form-group {{subscriptionForm.subscriptionBatchTime.$valid ? '' : 'has-error'}}" ng-show="subscription.deliveryType === 'BATCH'">
                <label for="subscriptionBatchTime" class="col-md-3 control-label">Batch time window</label>
                <div class="col-md-9">
                    <div class="input-group">
                        <input type="number" min="1" max="1000000" step="1" ng-required="subscription.deliveryType === 'BATCH'" class="form-control" id="subscriptionBatchTime" name="subscriptionBatchTime" placeholder="Max time between arrival of first message to batch delivery attempt." ng-model="subscription.subscriptionPolicy.batchTime"/>
                        <span class="input-group-addon">milliseconds</span>
                    </div>
                </div>
            </div>

            <div class="form-group {{subscriptionForm.subscriptionBatchVolume.$valid ? '' : 'has-error'}}" ng-show="subscription.deliveryType === 'BATCH'">
                <label for="subscriptionBatchVolume" class="col-md-3 control-label">Batch volume</label>
                <div class="col-md-9">
                    <div class="input-group">
                        <input type="number" min="1" max="1000000" step="1" ng-required="subscription.deliveryType === 'BATCH'" class="form-control" id="subscriptionBatchVolume" name="subscriptionBatchVolume" placeholder="Desired number of bytes in single batch." ng-model="subscription.subscriptionPolicy.batchVolume"/>
                        <span class="input-group-addon">bytes</span>
                    </div>
                </div>
            </div>

            <div class="form-group {{subscriptionForm.subscriptionRequestTimeout.$valid ? '' : 'has-error'}}" ng-show="subscription.deliveryType === 'BATCH'">
                <label for="subscriptionRequestTimeout" class="col-md-3 control-label">Request timeout</label>
                <div class="col-md-9">
                    <div class="input-group">
                        <input type="number" min="0" max="1000000" step="1" ng-required="subscription.deliveryType === 'BATCH'" class="form-control" id="subscriptionRequestTimeout" name="subscriptionRequestTimeout" placeholder="Max time for processing message by subscriber." ng-model="subscription.subscriptionPolicy.requestTimeout"/>
                        <span class="input-group-addon">milliseconds</span>
                    </div>
                </div>
            </div>
            <div class="form-group {{subscriptionForm.subscriptionSendingDelay.$valid ? '' : 'has-error'}}" ng-show="subscription.deliveryType === 'SERIAL'">
                <label for="subscriptionSendingDelay" class="col-md-3 control-label">Sending delay</label>
                <div class="col-md-9">
                    <div class="input-group">
                        <input type="number" min="0" max="5000" step="1" ng-required="subscription.deliveryType === 'SERIAL'" class="form-control" id="subscriptionSendingDelay" name="subscriptionSendingDelay" placeholder="Delay after which an event will be send" ng-model="subscription.subscriptionPolicy.sendingDelay"/>
                        <span class="input-group-addon">milliseconds</span>
                        <span class="input-group-addon helpme-addon" uib-tooltip="Amount of time in ms after which an event will be send. Useful if events from two topics are sent at the same time and you want to increase chance that events from one topic will be deliver after events from other topic.">?</span>
                    </div>
                </div>
            </div>
            <div class="form-group {{subscriptionForm.subscriptionMessageTtl.$valid ? '' : 'has-error'}}">
                <label for="subscriptionMessageTtl" class="col-md-3 control-label">Inflight message TTL</label>
                <div class="col-md-9">
                    <div class="input-group">
                        <input type="number" min="0" max="7200" step="1" required class="form-control" id="subscriptionMessageTtl" name="subscriptionMessageTtl" placeholder="Time when message can be resent to endpoint after failed sending attempts" ng-model="subscription.subscriptionPolicy.messageTtl"/>
                        <span class="input-group-addon">seconds</span>
                        <span class="input-group-addon helpme-addon" uib-tooltip="Amount of time a message can be held in sending queue and retried. If message will not be delivered during this time, it will be discarded.">?</span>
                    </div>
                </div>
            </div>
            <div class="form-group {{subscriptionForm.retryClientErrors.$valid ? '' : 'has-error'}}">
                <label for="retryClientErrors" class="col-md-3 control-label">Retry on 4xx status</label>
                <div class="col-md-9">
                    <div class="input-group checkbox">
                        <label>
                            <input type="checkbox" id="retryClientErrors" name="retryClientErrors" ng-model="subscription.subscriptionPolicy.retryClientErrors"/>
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group {{subscriptionForm.subscriptionMessageBackoff.$valid ? '' : 'has-error'}}">
                <label for="subscriptionMessageBackoff" class="col-md-3 control-label">Retry backoff</label>
                <div class="col-md-9">
                    <div class="input-group">
                        <input type="number" min="0" max="1000000" step="1" required class="form-control" id="subscriptionMessageBackoff" name="subscriptionMessageBackoff" placeholder="Delay between send attempts of failed requests" ng-model="subscription.subscriptionPolicy.messageBackoff"/>
                        <span class="input-group-addon">milliseconds</span>
                        <span class="input-group-addon helpme-addon" uib-tooltip="Minimum amount of time between consecutive message retries.">?</span>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label for="trackingMode" class="col-md-3 control-label">Message delivery tracking mode</label>
                <div class="col-md-9">
                    <div class="input-group">
                        <select class="form-control" id="trackingMode" name="trackingMode" ng-model="subscription.trackingMode">
                            <option value="trackingOff">No tracking</option>
                            <option value="discardedOnly">Track message discarding only</option>
                            <option value="trackingAll">Track everything</option>
                        </select>
                    </div>
                </div>
            </div>


            <div class="form-group">
                <label class="col-md-3 control-label">Filter</label>
                <div class="col-md-9">
                    <table class="table borderless" ng-show="subscription.filters.length > 0">
                        <tr>
                            <th>Type</th>
                            <th>Path</th>
                            <th>Matcher</th>
                        </tr>
                        <tr ng-repeat="filter in subscription.filters">
                            <td>
                                <label readonly ng-model="filter.type" style="top: 8px;"
                                       class="col-sm-2 col-form-label form-control-plaintext">{{filter.type}}</label>
                            </td>
                            <td>
                                <input ng-model="filter.path"
                                       class="form-control col-md-1 {{filter.path.$valid ? '' : 'has-error'}}"
                                       id="subscriptionFilterPathEdit"
                                       name="subscriptionFilterPathInput" placeholder="{{filter.path}}"/>
                            </td>
                            <td>
                                <input ng-model="filter.matcher"
                                       class="form-control col-md-1 {{filter.matcher.$valid ? '' : 'has-error'}}"
                                       id="subscriptionFilterMatcherEdit"
                                       name="subscriptionFilterMatcherInput" placeholder="{{filter.matcher}}"/>
                            </td>
                            <td>
                                <button class="btn btn-danger" ng-click="delFilter($index)">Delete</button>
                            </td>
                        </tr>
                    </table>

                    <table class="table borderless">
                        <tr>
                            <td>
                                <input ng-model="filter.path"
                                       class="form-control col-md-1 {{filter.path.$valid ? '' : 'has-error'}}"
                                       id="subscriptionFilterPath"
                                       name="subscriptionFilterPathInput" placeholder="Path for filter"/>
                            </td>
                            <td>
                                <input ng-model="filter.matcher"
                                       class="form-control col-md-1 {{filter.matcher.$valid ? '' : 'has-error'}}"
                                       id="subscriptionFilterMatcher"
                                       name="subscriptionFilterMatcherInput" placeholder="Matcher for filter"/>
                            </td>
                            <td>
                                <div class="col-md-1 subscription-add-subscription-filter">
                                    <button class="btn btn-success" ng-click="addFilter()">Add</button>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <hr/>

            <div class="form-group">
                <label for="monitoringSeverity" class="col-md-3 control-label">Monitoring severity</label>
                <div class="col-md-9">
                    <select required class="form-control" id="monitoringSeverity" name="monitoringSeverity" ng-model="subscription.monitoringDetails.severity">
                        <option value="NON_IMPORTANT">Non-important</option>
                        <option value="IMPORTANT">Important</option>
                        <option value="CRITICAL">Critical</option>
                    </select>
                </div>
            </div>
            <div class="form-group {{subscriptionForm.monitoringReaction.$valid ? '' : 'has-error'}}">
                <label for="monitoringReaction" class="col-md-3 control-label">Monitoring reaction</label>
                <div class="col-md-9">
                    <input class="form-control" id="monitoringReaction" name="monitoringReaction" placeholder="information for monitoring how to react when the subscription becomes unhealthy (e.g. team name or Pager Duty ID)" ng-model="subscription.monitoringDetails.reaction"/>
                </div>
            </div>

            <div class="form-group {{subscriptionForm.http2Enabled.$valid ? '' : 'has-error'}}">
                <label for="http2Enabled" class="col-md-3 control-label">Deliver using http/2</label>
                <div class="col-md-9">
                    <div class="input-group checkbox">
                        <label>
                            <input type="checkbox" id="http2Enabled" name="http2Enabled" ng-model="subscription.http2Enabled"/>
                        </label>
                    </div>
                </div>
            </div>

            <div class="form-group {{subscriptionForm.subscriptionIdentityHeadersEnabled.$valid ? '' : 'has-error'}}">
                <label for="subscriptionIdentityHeadersEnabled" class="col-md-3 control-label">Attach subscription identity headers</label>
                <div class="col-md-9">
                    <div class="input-group checkbox">
                        <label>
                            <input type="checkbox" id="subscriptionIdentityHeadersEnabled"
                                   name="subscriptionIdentityHeadersEnabled"
                                   ng-model="subscription.subscriptionIdentityHeadersEnabled"/>
                        </label>
                    </div>
                </div>
            </div>

            <div class="form-group" ng-repeat="(key, entry) in endpointAddressResolverMetadataConfig">
                <label for="{{key}}" class="col-md-3 control-label">{{entry.title}}</label>
                <div class="col-md-9" ng-switch on="entry.type">
                    <div ng-switch-when="boolean" class="input-group checkbox">
                        <label>
                            <input type="checkbox" id="{{key}}" name="{{key}}" ng-model="subscription.endpointAddressResolverMetadata[key]"/>
                            {{entry.placeholder}}
                        </label>
                    </div>

                    <input ng-switch-when="text" empty-to-null class="form-control" type="text" id="{{key}}" name="{{key}}" placeholder="{{entry.placeholder}}" ng-model="subscription.endpointAddressResolverMetadata[key]" />

                    <div ng-switch-when="number" class="input-group">
                        <input type="number" min="{{entry.min}}" max="{{entry.max}}" step="{{entry.step}}" class="form-control" id="{{key}}" name="{{key}}" placeholder="{{entry.placeholder}}" ng-model="subscription.endpointAddressResolverMetadata[key]"/>
                        <span class="input-group-addon">{{entry.addon}}</span>
                    </div>

                    <select ng-switch-when="select" empty-to-null class="form-control" id="{{key}}" name="{{key}}" ng-model="subscription.endpointAddressResolverMetadata[key]">
                        <option ng-repeat="(key, value) in entry.options" value="{{key}}">{{value}}</option>
                    </select>
                </div>
            </div>

        </form>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-disabled="subscriptionForm.$invalid" ng-click="save()">Save</button>
        <button class="btn btn-warning" ng-click="$dismiss()">Cancel</button>
    </div>
</section>
